<template>
	<view class="video-list-wrapper">
		<view class="search-wrapper">
			<view class="title_bar">
				<view class="title_bar_item" :class="{ title_bar_item_active: queryType == index }"
					@click="changeBarItem(index)" v-for="(item, index) in tagList" :key="index">
					<view class="tab">
						<view class="tab-inner" :class="
						queryType == index
							? ''
							: queryType == 0 && index == 1
							? `tab-inner01`
							: queryType == 1 && index == 0
							? `tab-inner0012`
							: queryType == 1 && index == 2
							? `tab-inner0122`
							: queryType == 2 && index == 1
							? `tab-inner12`
							: ''
						">
							{{ item.name }}
						</view>
					</view>
				</view>
			</view>
			<view class="" v-if="queryType == 0">
				<view class="tab_content">
					<view class="tab_label">
						<span class="star">*</span>
						机身条码
					</view>
					<view class="tab_tip" style="column-gap: 12rpx">
						<uni-easyinput
							maxlength="20"
							primaryColor="rgb(192, 196, 204)"
							clearable
							:inputBorder="false"
							:trim="true"
							placeholder="请输入机身条码"
							placeholderStyle="font-size:28rpx;text-align: right;"
							v-model="getVideoListParam.snCode"
						></uni-easyinput>
						<!-- <span>请选择机身条码</span> <uni-icons color="#aaa" type="right"></uni-icons> -->
						<uni-icons color="#aaa" size="20" @click="scanClick" type="scan"></uni-icons>
						<view class="" style="color: #007cff" @click="onSearch">
							搜索
						</view>
					</view>
				</view>
			</view>
			<view class="" v-if="queryType == 1">
				<view class="tab_content">
					<view class="tab_label">
						<span class="star">*</span>
						产品名称
					</view>
					<view class="good-name-search-wrapper">
						<uni-easyinput
							maxlength="20"
							primaryColor="rgb(192, 196, 204)"
							clearable
							:inputBorder="false"
							:trim="true"
							placeholder="请输入产品名称"
							placeholderStyle="font-size:28rpx;text-align: right;"
							v-model="getVideoListParam.goodsName"
							@clear="getList"
						></uni-easyinput>
						<view class="btn" @click="onSearch" @confirm="onSearch">
							搜索
						</view>
					</view>
				</view>
			</view>
			<view class="" v-if="queryType === 2">
				<view class="tab_content">
					<view class="tab_label">
						<span class="star">*</span>
						产品型号
					</view>
					<view class="good-model-search-wrapper">
						<uni-easyinput
							maxlength="20"
							primaryColor="rgb(192, 196, 204)"
							clearable
							:inputBorder="false"
							:trim="true"
							placeholder="请输入产品型号"
							placeholderStyle="font-size:28rpx;text-align: right;"
							v-model="getVideoListParam.goodsModel"
							@clear="getList"
						></uni-easyinput>
						<view class="btn" @click="onSearch" @confirm="onSearch">
							搜索
						</view>
					</view>
				</view>
			</view>
		</view>
		<scroll-view
			class="list-wrapper"
			:refresher-triggered="refreshState"
			:scroll-y="true"
			refresher-enabled
			refresher-background="transparent"
			@refresherpulling="handleRefreshPull"
			@scrolltolower="handleScrollToLower"
		>
			<view
				class="manual-item"
				v-for="(manual, manualIndex) in videoList"
				:key="manualIndex"
				@click="handleToDetail(manual.id)"
			>
				<view class="name">{{ manual.name }}</view>
				<image :src="manual.image" class="cover" mode="widthFix" v-if="manual.image"></image>
			</view>
			<view class="tip" v-if="videoList.length > 0">没有更多了</view>
		</scroll-view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from "vue";
	import _ from "lodash";
	import knowAPIRequest from '@/util/api/know'

	// 获取视频列表查询条件
	const getVideoListParam = ref({
		goodsCode: '',
		goodsModel: '',
		goodsName: '',
		limit: 10,
		page: 1,
		snCode: '',
	})

	// 查询类型
	const queryType = ref(0);

	// 标签列表
	const tagList = ref([
		{ status: 1, name: "按条码查" },
		{ status: 2, name: "按产品名称查" },
		{ status: 3, name: "按产品型号查" },
	]);

	// 刷新状态
	const refreshState = ref(false)

	// 列表总条数
	const listTotal = ref(0)

	// 视频列表
	const videoList = ref<Array<{ id : string; name : string; image : string }>>([])
	
	/**
	 * 搜索事件
	 */
	const onSearch = () => {
		getList()
	}

	/**
	 * 获取列表
	 */
	const getList = async () => {
		uni.showLoading({
			mask: true,
			title: '加载中'
		})
		const res = await knowAPIRequest.getVideoList(getVideoListParam.value)
		uni.hideLoading()
		refreshState.value = false
		videoList.value = res.data.rows
		listTotal.value = Number(res.data.total)
	}
	
	/**
	 * 视频点击时触发
	 */
	const handleToDetail = (id: string) => {
		uni.navigateTo({
			url: `/pages_user/know/video/detail?id=${id}`,
		})
	}
	
	/**
	 * 重置搜索条件
	 */
	const resetGetListParam = () => {
		getVideoListParam.value = {
			goodsName: '',
			goodsModel: '',
			goodsCode: '',
			limit: 10,
			page: 1,
			snCode: '',
		}
	}
	
	/**
	 * 滚动列表下拉事件
	 * @param {Object} e - Event
	 */
	const handleRefreshPull = (e: {detail: {deltaY: number}}) => {
		if (e.detail.deltaY < 0) return
		refreshState.value = true
		resetGetListParam()
		getList()
	}
	
	/**
	 * 滚动到底部时触发
	 */
	const handleScrollToLower = () => {
		if (videoList.value.length < listTotal.value) {
			getVideoListParam.value.limit += 10
			getList()
		}
	}

	// 切换查询
	const changeBarItem = (index) => {
		queryType.value = index;
	};

	// 条码查包修
	const scanClick = () => {
		uni.scanCode({
			scanType: ["qrCode", "barCode"], //扫码类型
			success: async function (res) {
				getVideoListParam.value.snCode = res.result;
			},
			fail: (err) => {
				// #ifdef H5
				uni.showToast({
					icon: "none",
					title: "设备不支持此功能",
					duration: 3000,
				});
				// #endif
			},
		});
	};

	defineExpose({
		getList
	})
</script>

<style lang="scss" scoped>
	$size: 10rpx;
	$size1: 20rpx;
	
	.video-list-wrapper {
		height: 100%;
		padding: 24rpx 30rpx;
		box-sizing: border-box;
		filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.1));
		display: flex;
		flex-direction: column;
		row-gap: 30rpx;
		font-size: 28rpx;
		
		.search-wrapper {
			filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.1));
		
			.title_bar {
				display: flex;
				justify-content: space-evenly;
		
				.title_bar_item {
					flex: 1;
		
					.tab {
						padding-top: 12rpx;
		
						.tab-inner {
							background-color: #e9edf5;
							padding: 22rpx;
							color: #777;
							display: flex;
							justify-content: center;
							align-items: center;
							position: relative;
		
							&:after {
								content: "";
								width: 100%;
								height: 100%;
								position: absolute;
								background-color: #fff;
								z-index: -1;
							}
						}
					}
		
					&:nth-child(1) {
						.tab-inner {
							border-radius: $size 0 0 0;
						}
					}
		
					&:nth-child(3) {
						.tab-inner {
							border-radius: 0 $size 0 0;
						}
					}
		
					.tab-inner01 {
						border-bottom-left-radius: $size1;
					}
		
					.tab-inner0012 {
						border-bottom-right-radius: $size1 !important;
					}
		
					.tab-inner0122 {
						border-bottom-left-radius: $size1 !important;
					}
		
					.tab-inner12 {
						border-bottom-right-radius: $size1;
					}
				}
		
				.title_bar_item_active {
					border-top-left-radius: $size1;
					border-top-right-radius: $size1;
		
					.tab {
						background-color: #ffffff;
						border-top-left-radius: $size1;
						border-top-right-radius: $size1;
		
						.tab-inner {
							color: #007cff;
							background-color: #ffffff;
						}
					}
				}
			}
		
			.tab_content {
				background-color: #ffffff;
				display: flex;
				justify-content: space-between;
				padding: 4rpx 24rpx;
				height: 90rpx;
				border-radius: 0 0 $size $size;
				column-gap: 48rpx;
				border-top: 1px solid rgba(0, 0, 0, 0.05);
		
				.tab_label {
					display: flex;
					align-items: center;
					column-gap: 6rpx;
					white-space: nowrap;
		
					.star {
						font-weight: bold;
						color: #dd542d;
					}
				}
				
				.good-model-search-wrapper,
				.good-name-search-wrapper {
					display: flex;
					align-items: center;
					column-gap: 5px;
							
					:deep(.uni-input-input) {
						text-align: right;
					}
					
					.btn {
						height: 40rpx;
						color: #007cff;
					}
				}
		
				.tab_tip {
					display: flex;
					align-items: center;
					justify-content: flex-end;
					color: #aaa;
					// column-gap: 12rpx;
					flex: 1;
					overflow: hidden;
		
					:deep(.uni-input-input) {
						text-align: right;
					}
		
					.item-val {
						text-align: right;
						color: #000;
						text-overflow: ellipsis;
						white-space: nowrap;
						overflow: hidden;
						flex: 1;
					}
				}
			}
		}
		
		.list-wrapper {
			height: calc(100% - 94rpx - 90rpx - 30rpx);
			
			.manual-item {
				background-color: #fff;
				border-radius: 10rpx;
				display: flex;
				flex-direction: column;
				margin-bottom: 30rpx;
				box-sizing: border-box;
				padding: 24rpx 30rpx;
				row-gap: 12rpx;
				
				.cover {
					width: 100%;
					height: 300rpx;
				}
			}
			
			.tip {
				text-align: center;
				color: #ccc;
			}
		}
	}
</style>